<style scoped lang="scss">
li {
  position: absolute;
  width: 212px;
  height: 212px;
}
p {
  position: absolute;
  left: 0;
  top: 0;
  width: 212px;
  height: 212px;
}
div {
  background-color: #dd1c1c;
  position: absolute;
  transform: rotate(45deg);
}
img {
  position: absolute;
  transform: rotate(-45deg);
}
</style>

<template>
  <li class="">
    <div class="oh" :style="style">
      <a :href="'/home/news/detail?id=' + info.id">
        <img v-if="info.src" :style="imgStyle" :src="info.src" alt="" />
      </a>
    </div>
    <p v-if="info.name" class="flex aic jcc pointer">
      <a :href="'/home/news?cate_id=' + info.id" class="color_fff fs16">{{
        info.name
      }}</a>
    </p>
  </li>
</template>

<script>
export default {
  name: "ServiceItem",
  props: {
    info: {
      type: Object,
      default() {
        return Object.create(null);
      }
    }
  },
  data() {
    return {
      W: 212
    };
  },
  computed: {
    w() {
      const { W } = this;
      return Math.sqrt((W / 2) ** 2 * 2);
    },
    imgStyle() {
      const { W, w } = this;
      return {
        width: W + "px",
        height: W + "px",
        left: (w - W) / 2 + "px",
        top: (w - W) / 2 + "px"
      };
    },
    style() {
      const { w, W } = this;
      return {
        width: w + "px",
        height: w + "px",
        left: (W - w) / 2 + "px",
        top: (W - w) / 2 + "px"
      };
    }
  }
};
</script>
